<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>金融供需模型</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>

<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<script src="/js/jquery1.10.2.min.js"></script>
<script src="/js/highcharts-v9.js"></script>
<!-- Dialog -->
<link rel="stylesheet" href="/css/pure/Dialog.css">
<script src="/js/pure/Dialog.js"></script>
<style>
    .session_box{
        width: 90%;height: 100%;
        background-color: white;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .session{
        width: calc(80% - 2px);
        height: calc(80% - 5px);
        background-color: white;
        margin-left: 2px;
        margin-top: 5px;
    }
    .session_img{
        width: calc(100%);height:calc(100%)
    }
    .p{
        text-align: left;
        font-size: 15px;
        margin: 3% 3%
    }
</style>

<body>

<div th:replace="common :: navbar"></div>

    <input th:value="${classLessonId}" type="hidden" id="classLessonId">
<section class="session_box">
    <div class="session">
        <div class="session_img" id="container" ></div>
    </div>

    <div  style="width: calc(80% - 2px);
            height: calc(20% - 5px);
            background-color: white;
            margin-left: 2px;
            margin-top: 5px;">
        <p>
            <input th:value="${lesson.classLessonIssueId}" type="hidden" id="classLessonIssueId">
            <a  th:text="'一共'+${lesson.issue}+'期，'"> </a>
            <a  th:text="'限时'+${lesson.limitTime}+'分钟，'"> </a>
            <a style="color: #f59b00"  th:text="'进行到第'+${lesson.issues}+'期，'"> </a>
            <a th:text="'开始时间：'+${#dates.format(lesson.createTime,'yyyy-MM-dd HH:mm:ss')}+'。'"> </a>
            <a class="pure-button" th:href="@{/student/lessonProcessInfo(id=${lesson.id})}"  >返回参与</a>
            <a class="pure-button" style="color: cornflowerblue"  >该课程往期的数据</a>
            <a class="pure-button"  th:onclick="refer([[${lesson.modelId}]],[[${lesson.remark}]])" > 知识点</a>
        </p>
    </div>

</section>
<script>

    $(document).ready(function() {
        var classLessonId = document.getElementById("classLessonId").value;
        console.log(classLessonId);
        var url  = "/common/lessonOutIssuesData";
        //创建异步对象
        var xhr = new XMLHttpRequest();
        //设置请求的类型及url
        xhr.open('post', url,true);
        //post请求一定要添加请求头才行不然会报错
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
        // FirstName=Bill&LastName=Gates
        var data = "classLessonId="+classLessonId;
        console.log(data);
        xhr.send(data);
        xhr.onreadystatechange = function () {
            // 这步为判断服务器是否正确响应
            if (xhr.readyState == 4 && xhr.status == 200) {
                var re = JSON.parse(xhr.responseText);
                console.log(re);
                if(re.code == 200 ){
                    var list = re.data;
                    var xAxis_categories = [];
                    var data_x_Y = [];
                    for(var i = 0;i < list.length;i ++){
                        var item = list[i];
                        xAxis_categories[i] = i;
                        data_x_Y[i] = item.endP;
                    }
                    doLine(xAxis_categories,data_x_Y);
                }else{
                    new Dialog().alert(re.msg+"!", {
                        type: 'failure'
                    });
                }
            }
        };
    });
    function doLine(xAxis_categories,data_x_Y) {
        var title = {
            text: '供需平衡模型'
        };
        var subtitle = {
            // text: 'www.baidu.com'
        };
        var xAxis = {
            categories: xAxis_categories
        };
        var yAxis = {
            title: {
                text: '价格'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: ''
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series =  [
            {
                name: '需求曲线',
                data: data_x_Y
            }
        ];

        var json = {};
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;
        $('#container').highcharts(json);
    }
    function refer(modelId,remark){

        new Dialog({
            title: '知识点',
            content: '<h6>模型信息描述</h6>' +
                '<p>'+remark+'</p>' ,
            buttons: [{
                value: '知道啦！'
            }]
        });

        // new Dialog({
        //     title: '知识点',
        //     content: '<h6>模型信息描述</h6>' +
        //         '<p>'+remark+'</p>' ,
        //     buttons: [{
        //         events: function (event) {
        //             event.dialog.remove();
        //             return;
        //             // 按钮禁用
        //             // event.dialog是当前实例对象
        //             console.log(event)
        //             console.log(event.type)
        //         }
        //     }, {}]
        // });
    }

</script>
</body>
</html>